---
title: Terugvoer
image: /images/user-guide/emails/emails_header.png
---

<Frame>
  <img src="/images/user-guide/emails/emails_header.png" alt="Header" />
</Frame>

Wys vordering of aftelling en skuif van regs na links.

<Tabs>

<Tab title="Usage">

```jsx
import { ProgressBar } from "twenty-ui/feedback";

export const MyComponent = () => {
  return (
    <ProgressBar
      duration={6000}
      delay={0}
      easing="easeInOut"
      barHeight={10}
      barColor="#4bb543"
      autoStart={true}
    />
  );
};
```

</Tab>

<Tab title="Props">

| Eienskappe | Tipe       | Beskrywing                                                                                   | Standaard |
| ---------- | ---------- | -------------------------------------------------------------------------------------------- | --------- |
| duur       | nommer     | Die totale duur van die voortgangsbalk-animasie in millisekondes                             | 3         |
| delay      | nommer     | Die vertraging in die begin van die voortgangsbalk-animasie in millisekondes                 | 0         |
| easing     | string     | Easing function for the progress bar animation                                               | easeInOut |
| balkhoogte | nommer     | Die hoogte van die balk in pixels                                                            | 24        |
| balkkleur  | string     | Die kleur van die balk                                                                       | gray80    |
| autoStart  | booleaanse | As 'waar', begin die voortgangsbalk-animasie outomaties wanneer die komponent gemonteer word | `waar`    |

</Tab>
</Tabs>

## Sirkelvormige Voortgangsbalk

Wys die vordering van 'n taak, dikwels gebruik in laaiskerms of areas waar jy voortgaande prosesse aan die gebruiker wil kommunikeer.

<Tabs>

<Tab title="Usage">

```jsx
import { CircularProgressBar } from "@/ui/feedback/progress-bar/components/CircularProgressBar";

export const MyComponent = () => {
  return <CircularProgressBar size={80} barWidth={6} barColor="green" />;
};
```

</Tab>

<Tab title="Props">

| Eienskappe       | Tipe   | Beskrywing                                       | Standaard    |
| ---------------- | ------ | ------------------------------------------------ | ------------ |
| grootte          | nommer | Die grootte van die sirkelvormige voortgangsbalk | 50           |
| breedte van balk | nommer | Die breedte van die voortgangsbalklyn            | 5            |
| balkkleur        | string | Die kleur van die voortgangsbalk                 | currentColor |

</Tab>

</Tabs>
